{% extends "base.html" %}
{% load wiki_markup %}

{% block head %}
    <script src="http://openlayers.org/api/OpenLayers.js"></script>
    <script src='http://maps.google.com/maps?file=api&amp;v=2&amp;key={{gmaps_key}}&amp;sensor=false'></script>
    <script type="text/javascript">

        function init(){
            map = new OpenLayers.Map( 'mapdiv' );
            
            var gphy = new OpenLayers.Layer.Google(
                "Google Physical",
                {'type': G_PHYSICAL_MAP , 'sphericalMercator': true, 'maxExtent': new OpenLayers.Bounds(-20037508.34,-20037508.34,20037508.34,20037508.34)}
            );

            var gsat = new OpenLayers.Layer.Google(
                "Google Satellite",
                {'type': G_SATELLITE_MAP , 'sphericalMercator': true, 'maxExtent': new OpenLayers.Bounds(-20037508.34,-20037508.34,20037508.34,20037508.34)}
            );

            points = new OpenLayers.Layer.Vector("Photos", {
                styleMap: new OpenLayers.StyleMap({
                    "default": new OpenLayers.Style(OpenLayers.Util.applyDefaults({
                        /*label : "${name}",*/
                        labelAlign: "${align}",
                        externalGraphic: '${graphic}',
                        pointRadius:20,
                        graphicOpacity:1,
                        fontSize: "15px",
                        fontColor:"#00FF00",
                        fontWeight:"bold",
                    }, OpenLayers.Feature.Vector.style["default"])),
                    "select": new OpenLayers.Style(OpenLayers.Util.applyDefaults({
                        label : "${name}",
                        externalGraphic: '${graphic}',
                        pointRadius:20,
                        graphicOpacity:1,
                        labelAlign: "${align}",
                        fontSize: "15px",
                        fontColor:"#000000", 
                        fontWeight:"bold",                        
                        fill: true,
                    }, OpenLayers.Feature.Vector.style["select"])),
                })
            });

            proj = new OpenLayers.Projection("EPSG:4326");          


            {% for point in points %}

                point{{ point.0 }} = new OpenLayers.Geometry.Point({{ point.1 }}, {{ point.2 }});
                point{{ point.0 }}.transform(proj, new OpenLayers.Projection("EPSG:900913"));
                point{{ entrance.0 }}Feature = new OpenLayers.Feature.Vector(point{{ point.0 }});

            {% endfor %}

            points.addFeatures([{%for point in points %}point{{ entrance.0 }}Feature, {%endfor%}]);

            map.addControl(new OpenLayers.Control.LayerSwitcher());
            map.addLayer(gsat);
            map.addLayer(gphy);            
            map.addLayer(points);
            map.zoomToExtent(entrances.getDataExtent());
        }
    </script>
{% endblock head %}

{% block onload %}init();{% endblock onload %}

{% block content %}
<div id="mapdiv"></div>
{% endblock content %}
